<template>
    <div class="login center">
      <div class="login-box">
        <h1>梦学谷会员管理系统</h1>
        <el-form :model="formData" ref="formData" :rules="rules">
          <el-form-item label="账号" prop="username">
            <el-input v-model="formData.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="formData.password"></el-input>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" class="loginbtn" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '账号不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
        }
    }
  },
  methods: {
    // 点击登录
    login () {
      this.$refs["formData"].validate(async valid => {
        if(!valid) return
        // 从action获取登录数据
        const response = await this.$store.dispatch('handleUserLogin', this.formData)
        if ( response.code === 1 ) {
          this.$router.push('/')
        }
      })
      
  },
}
}
</script>

<style lang="scss">
.login {
    width: 100vw;
    height: 100vh;
    background: url('../../public/login.jpg');
    background-size: 100% 100%;
    .login-box {
        box-sizing: border-box;
        width: 390px;
        height: 300px;
        background-color: rgba($color: #ffffff, $alpha: 0.8);
        border-radius: 20px;
        padding: 50px;
        h1 {
            text-align: center;
            margin-bottom: 20px;
        }
        .loginbtn {
            margin-left: 50px;
        }
    }
}
.el-form-item__content {
    display: flex !important;
}
</style>
